<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <!--如果是IE 就以标准渲染-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    <!-- 视窗——————响应式布局 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />

    <!--当前页面的三要素-->
    <title>运维系统</title>
    <meta name="description" content="聚能优电" />
    <meta http-equiv="keywords" content="聚能优电" />
    <script type="text/javascript" src="./js/verify.js"></script>
    <!-- css -->
    <link rel="stylesheet" type="text/css" href="./css/common/common.css" />
    <!-- <link rel="stylesheet" type="text/css" href="./css/alarm.css" /> -->

    <style>
#container.device {
  max-width: 750px;
  height: 100%;
  margin: auto;
  overflow-x: hidden;
  background-color: rgb(0, 28, 67);
  /*解决ios上滑动不流畅*/
  -webkit-overflow-scrolling: touch;
}

#container.device::-webkit-scrollbar {
  /*隐藏滚轮*/
  display: none;
  width: 0px;
}

#container .device_01 {
  height: 100%;
  width: 100%;
}

/*主屏幕*/
.device_screen {
  height: 100%;
  margin: 0 5%;
  width: 90%;
  position: relative;
  overflow-x: hidden;
  /*解决ios上滑动不流畅*/
  -webkit-overflow-scrolling: touch;
}

.device_screen::-webkit-scrollbar {
  /*隐藏滚轮*/
  display: none;
  width: 0px;
}

/* 题目 */
.device_screen .m_title {
  color: #FFFFFF;
  position: fixed;
  width: 90%;
  height: 0.6rem;
  top: 0;
  left: 0;
  font-weight: bolder;
  font-size: 0.36rem;
  padding: 0.5rem 5% 0.4rem 5%;
  background-color: rgb(0, 28, 67);
  z-index: 5;
  letter-spacing: 2.25px;
  display: flex;
  justify-content: start;
  align-items: center;
}

.device_screen .m_title .back {
  /* height: 70%; */
  margin-right: 0.4rem;
}

.device_screen .m_title .back img {
  height: 100%;
}
/* 内容部分 */
.device_screen table {
  margin-top: 1.55rem;
  width: 100%;
  font-size: 0.25rem;
  color: #becadc;
}


.device_screen table thead tr{
    font-size: 0.3rem;
    height:50px;
}

.device_screen table tbody tr td:nth-child(1){
    width:18%;
}
.device_screen table tbody tr td:nth-child(2){
    width:20%;
}

.device_screen table tbody tr td:nth-child(3){
    width:27%;
}
.device_screen table tbody tr td:nth-child(4){
    width:35%;
}

    </style>
</head>

<body>
    <div id="container" class="device">
        <div class="device_01">
            <!--主屏内容-->
            <div class="device_screen">
                <div class="m_title">
                    <div id="back" class="back">
                        <img src="./images/back.svg" alt="">
                    </div>
                    <span class="tit">设备信息</span>
                </div>
                <table>
                    <thead>
                        <tr>
                            <td>设备ID</td>
                            <td>向日葵ID</td>
                            <td>项目名称</td>
                            <td>地址</td>
                        </tr>
                    </thead>

                
                    <tbody id="bodycon">
                        
                        <tr>
                            <td>1</td>
                            <td>22</td>
                            <td>项目名称dfgdfsg</td>
                            <td>东风浩荡发货单费</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>44</td>
                            <td>项目名dfgdfgd称</td>
                            <td>地东风浩荡防护服好地方址</td>
                        </tr>

                    </tbody>
            </table>

            </div>
        </div>
    </div>


    <script>
        (function (win, doc) {
            var docEl = doc.documentElement || document.body; //获取HTML标签

            var container = doc.getElementById("container"); //container元素
            //判断是移动端设备还是PC,移动 就采用'orientationchange',横竖屏事件，PC端就采用onresize，窗口改变时间
            var resize =
                "onorientationchange" in win ? "orientationchange" : "resize";

            function rem() {
                docEl.style.fontSize = 100 * (container.clientWidth / 750) + "px";
            }

            //监听'DOMContent事件:DOM加载完成执行,如果DOMContent事件，那么执行rem函数
            doc.addEventListener("DOMContentLoaded", rem, false);

            //win下监听resize事件,如果resize事件，那么执行rem函数
            win.addEventListener(resize, rem, false);
        })(window, document);
    </script>
    <!-- js -->
    <script type="text/javascript" src="./js/jquery-3.4.1.js"></script>
    <!-- <script type="text/javascript" src="./js/swiper-3.4.2.min.js"></script> -->
    <script type="text/javascript" src="./layer/layer.js"></script>
    <script>
        $(document).ready(function () {

            $("#back").click(function(){
                window.location.href = "index.html";
            });

            updateData(); // 首次加载立即请求数据
            // setInterval(updateData, 1000); // 首次加载之后，每1s重新请求一次数据
            function updateData() { // 请求数据
                $.ajax({
                    type: "GET",
                    dataType: "json",
                    url: "http://112.74.169.99:21021/api/services/app/DeviceService/GetDeviceOpsInfo",
                    beforeSend: function (xhr) {
                        xhr.setRequestHeader("Accept",
                            "application/json, text/javascript, */*; q=0.01"
                        );
                        xhr.setRequestHeader("Authorization", accessToken);
                        xhr.setRequestHeader('.AspNetCore.Culture',
                            'zh-Hans');
                    },
                    success: function (res) {
                        // console.log(res);
                        $("#bodycon").html(` `);
                        $("#bodycon").html(eachdata(res.result));
                    },
                    error: function (err) {
                        console.log("请求失败");
                    }
                });

            }


            // 遍历数据
            function eachdata(obj) {
                var str = '';
                if (obj.constructor == Array) {
                    for (var i = 0, len = obj.length; i < len; i++) {
                        str += `
                            <tr>
                                <td>` + obj[i].deviceNumber + `</td>
                                <td>` + obj[i].xrkid + `</td>
                                <td>` + obj[i].remark1 + `</td>
                                <td>` + obj[i].location + `</td>
                            </tr>
                        `;

                    }
                    return str;
                }
            }
        });
    </script>

</body>

</html>